03 การใส ข อความบนเว บเพจ

Transcription

1 03 การใส ข อความบนเว บเพจ บนเว บเพจส วนใหญ ม กจะประกอบไปด วยข อความ และร ปภาพ ซ งเราจะต องเตร ยมข อม ลต างๆ เหล าน ไว ล วงหน า เพ อใส ลงในแต ละหน าเว บเพจ สาหร บข อความน นเราอาจพ มพ เก บไว ในโปรแกรมเว ลด โปรเซสเซอร แล วก อปป มาใช หร ออาจพ มพ ลงไปใน Dreamweaver โดยตรงเลยก ได การพ มพ ข อความลง ใน Dreamweaver น นอาจจะแสดงผลไม เหม อนก บบนเว บเพจท งหมด ซ งจะข นอย ก บเคร องของผ ชมด วย ด งน นม จ ดท ควรระว งหลายจ ด ยกต วอย างเช น การกาหนดฟอนต ต วอ กษรน น หากเล อกใช ฟอนต แปลกๆ ผ ชมท ไม ม ฟอนต น อย ก ไม สามารถอ านได ใส ข อความลงบนเว บเพจ การใส ข อความลงบนเว บเพจของ Dreamweaver ม การใช งานแบบโปรแกรมเว ร ดโปรเซสเซอร ค อ วางเคอร เซอร ลงบนบร เวณท ต องการพ มพ แล วพ มพ ข อความตามต องการ นอกจากน ย งสามารถต ด, ค ดลอก และวางข อความได เหม อนโปรแกรมเว ร ดโปรเซสเซอร - ย ายข อความ ทาได โดยเล อกข อความ แล วคล กลากไปวางท ตาแหน งใหม หร ออ กว ธ หน งให เล อก ข อความ แล วเล อกคาส ง Edit > Cut (ค ย ล ด Ctrl X) กดน นวางเคอร เซอร ตรงตาแหน งปลายทาง แล วใช คาส ง Edit > Paste (ค ย ล ด Ctrl V) แทนก ได - ก อปป ข อความ ทาได โดยเล อกข อความ แล วกดค ย Ctrl ค างไว พร อมก บคล กลากไปวางท ใหม หร อ อ กว ธ หน ง ให เล อกข อความแล วเล อกคาส ง Edit > Copy (ค ย ล ด Ctrl C) จากน นวางเคอร เซอร ตรง ตาแหน งปลายทาง แล วใช คาส ง Edit > Paste (ค ย ล ด Ctrl V) แทนก ได

2 เว นวรรคระหว างข อความ ตามปกต การเว นวรรคระหว างข อความในเว บเพจ ค ณจะเคาะวรรคได เพ ยงอย างเด ยวเท าน น หาก ต องการเคาะวรรคมากกว าหน งคร ง อาจเล อกทาตามว ธ ใดว ธ หน ง ด งน - บนพาเนล INSERT เม อใช งานคร งแรกจะแสดงป ม Common อย ด านบน ในคล ดป ม Common > Text จากน นคล ก Characters > Non-Breaking Space เพ อใส ต วเว นวรรค

3 ข นบรรท ดใหม ในย อหน าเด ม ตามปกต แล วถ าต องการข นบรรท ดใหม จะทาได โดยการกดค ย Enter แต ในกรณ ท ค ณต องการป ด ข อความให ข นบรรท ดใหม แต ย งอย ในย อหน าเด ยวก นแล วน น สามารถทาได โดยใช ว ธ ใดว ธ หน งด งน - ว ธ ท 1 กดค ย Shift Enter - ว ธ ท 2 บนพาเนล INSERT เล อกคาส ง Text แล วคล ก Character > Line Break (Shift + Enter) ด งร ป Note ในม มมองการออกแบบของเว บเพจท พ มพ ข อความอาจจะต างจากการแสดงผลร งบนบราวเซอร เน องจาก Dreamweaver ไม สามารถต ดคาภาษาไทยได ด งน นการข นบรรท ดใหม ของข อความภาษาไทยได ไม สวยงาม แต ไม ต องก งวล เพราะเวลาแสดงผลจร งการต ดคะข นก บบราวเซอร และสภาพแวดล อมท ผ ชมใช ด เว บเพจ แทรกส ญล กษณ พ เศษ การพ มพ ข อความลงไปบนเว บเพจ บางคร งอาจาเป นต องแทรกส ญล กษณ พ เศษลงไป เช น เป น ต น ซ งสามารถแทรกได โดยเล อกกล มคาส ง Characters แล ว เล อกส ญล กษณ ท ต องการ ถ าจะใช ส ญล กษณ นอกเหน อจากน ให เล อกคาส ง Other Characters เพ อต องการเข าไปเล อกส ญล กษณ อ นๆตามต องการ

4 จ ดร ปแบบข อความ ข อความท แสดงบนเว บเพจสามารถจ ดร ปแบบของข อความเช น ฟอนต ต วอ กษร, ขนาด, ส, ล กษณะ ต วหนา ต วเอ ยง รวมตาแหน งย อหน าข อความได หลายว ธ ด วยก น เช น ใช เคร องม อบนพาเนล PROPERTLES, ใช คาส งในกล มคาส ง Text บนพาเนล INSERT และใช เมน ล ดจาการคล กขวา เป นต น ใน หน งส อเล มน เน นท การใช พาเนล PROPERTLES เป นหล กเน องจากเป นว ธ ท สะดวกท ส ด เล อกข อความบนเว บเพจ

5 ก อนท จ ดร ปแบบข อความ เราะต องเล อกกล มข อความก อน เพ อให ม ผลก บข อความท เล อกไว เท าน น ว ธ ในการเล อกข อความใน Dreamweaver จะเหม อนก บโปรแกรมโปรเซสเซอร ด งน จ ดร ปแบบข อความด วยพาเนล PROPERTIES เคร องม อสาหร บจ ดร ปแบบข อความในพาเนล PROPERTIES แบ งออกเป น 2 ร ปแบบหล กๆ ด งน

6 จ ดร ปแบบข อความด วย CSS เพ อให ข อความท อย บนเว บเพจม ความเป นระเบ ยบเร ยบร อย เราสามารถใช CSS หร อ Cascading Style Sheet ในการจ ดข อความได โดยสร างเป นสไตล สาหร บใช ก บข อความแต ละแบบ เช น ห วข อระด บ ต างๆ, เน อหา, ข อความท อย ในตาราง เป นต น การสร างสไตล ไว ใช งานะช วยลดเวลาในการต งค าให ก บแต ละ ข อความ หร อแต ละเว บเพจ และย งช วยให เว บด สวยงามเป นระเบ ยบอ กด วย สร างสไตล ต วอ กษร

7 กาหนดส ต วอ กษร การกาหนดส ต วอ กษร หากกาหนดไว ในหมวด Appearance (CSS) ท หน า Page Properties จะม ผล ก บข อความท งเว บเพจ แต หากต องการกาหนดส เฉพาะข อความบางส วนให ทาได โดยคล กช องส แล วเล อกส ท ต องการ ด งร ป

8 หากไม ได กาหนดส ให ก บข อความ (ปล อยเป นค าว างๆ) การแสดงผลจะข นอย ก บการกาหนด Text color ใน Page Properties ก ไม ได กาหนดไว การแสดงผลจะข นก บการต งค าในบราวเซอร ของผ ชม Note หล งจากจ ดร ปแบบข อความแล ว ถ าค ณไม เห นผลล พธ ปรากฏบนเว บเพจ ให ตรวจสอบสถานะของป ม 80 บนท ลบาร Style Rendering ซ งป มน จะต องถ กเล อกอย ผลการจ ดร ปแบบจ งจะแสดงบนเว บเพจ

9 กาหนดสไตล ต วอ กษรให ก บข อความ Tip การแสดงผลของเว บเพจบนบราวเซอร น น ถ าเว บเพท สร างข นใช ร ปแบบฟอนต ท ผ ชมไม ม ในเคร อง หาก ต องการใช ฟอนต พ เศษเพ ยงบางจ ดควรนาข อความส วนน นไปสร างเป นภาพในโปรแกรมกราฟ กแทน แก ไขสไตล ต วอ กษร หล งจากท สร างสไตล ต วอ กษรและกาหนดให ก บเว บเพจแล ว หากต องการแก ไขสไตล ก ทาได ท นท เช น เปล ยนสไตล ช ดฟอนต ต วอ กษร, เปล ยนส ต วอ กษร, ทาต วหนา เป นต น ซ งการเปล ยนแปลงแก ไขสไตล น จะม ผลก บท กข อความท ใช สไตล น อย ด งน นจ งช วยประหย ดเวลาในการแก ไข เพราะแก ไขท สไตล เด ยว ข อความท งหมดบนเว บเพจท ใช สไตล เด ยวก นจะถ กแก ไขตามท นท

10 จ ดร ปแบบข อความด วย HTML เป นการจ ดร ปแบบด วยคาส งหร อแท ก HTML โดยจะแตกต างจากร ปแบบของ CSS ค อไม ต อง บ นท กร ปแบบท กาหนดไว ถ าในเว บเพจม การใช ร ปแบบให ก บย อหน าน นๆได เช น ห วข อระด บต างๆ หร อ ข อความท วไป เป นต น โดยเล อกร ปแบบในช อง Format บนพาเนล PROPERTIES ด งร ป

11 กาหนดล กษณะต วอ กษร การกาหนดละกษณะต วอ กษรเป นการกาหนดให ต วอ กษรท เล อกเป นต วหนา หร อต วเอ ยงตาม ต องการ โดยเล อกข อความ แล วคล กป ม หร อ บนพาเนล PROPERTIES (ถ าจะยกเล กก คล กซ าอ ก คร ง)

12 จ ดเย องย อหน า โดยปกต แล วย อหน าข อความจะวางช ดซ ายบนเว บเพจ ซ งเราสามารถจ ดให ย อหน าให เย ยงออกไป ทางขวา คร งละ 1 ช วง โดยม ข นตอนด งต อไปน - Text Indent จ ดเย ยงย อหน าไปทางขวาท ละ 1 ช วง

13 - Text Outdent จ ดย อหน ากล บมาทางซ ายท ละ 1 ช วง Note ถ าต องการร นย อหน ากล บทางด านซ าย ให คล กป ม Text Outdone โดยจะร นเข ามาท ละ 1 ช วง แต จะ ไม ร นไปทางซ ายเก นกว าตาแหน งย อหน าปกต สร างรายการแบบม ห วข อ ในกรณ ท เน อหาในเว บเพจเป นรายการท ม หมายเลขกาก บ หร อเป นรายการท ม ห วข อ (Bullet) ก สามารถสร างรายการเหล าน ได โดยเล อกข อความท ต องการจ ดเป นห วข อ แล วคล กป ม สาหร บ รายการท ต องการใช บ ลเล ตกาก บหน าข อความ และถ าต องการรายการท ม หมายเลยกาก บ ให คล กป ม ท อย บนพาเนล PROPERTIES Note - ข อความท จะจ ดเป นคนละห วข อ ต องอย อย างย อหน าก น - หากย งไม ได พ มพ ข อความ ก สามารถสร างรายการได เช นก น โดยคล กป ม 86 หร อ 86 แล วพ มพ ข อความ และกดค ย Enter ข นห วข อถ ดไป เม อต องการจบรายการให กดค ย Enter ต ดก น 2 คร ง - เมท อต องการยกเล กห วข อ ให คล กท ห วข อน น (หร อคล กลากให ครอบคล มหลายห วข อ) แล ว คล กป ม 86 หร อ 86 ซ าอ กคร ง

14 สร างห วข อย อ แทรกเส นแบ งเน อหา เราสามารถแทรกเส นแนวนอนสาหร บค นหร อแบ งเน อหาภายในเว บเพจได ด งน

15 ก อปป ข อความจากภายนอก ในการเก บข อม ลสาหร บสร างเว บเพจ บางคร งอาจเก บไว ในไฟล ประเภทอ น เช น Word, Excel ซ ง สามารถนาข อความท เก บไว ในไฟล เหล าน น มาวางไว บนเว บเพจได โดยว ธ การด งต อไปน ก อปป ข อความมาจาก Microsoft Word

16 ในข นตอนท 5 ให กาหนดร ปแบบในการ วางข อความ ด งน - Text only วางเฉพาะข อความเพ ยง อย างเด ยวโดยไม ม การจ ดร ปแบบใดๆ - Text with structure (paragraphs, Lists, tables, etc.) วางข อความตาม โครงสร างต นฉบ บ เช น การ ดย อหน า, บ ล เล ต, ตาราง และอ นๆ - Text with structure plus basic formatting (bold, italic) วางข อความตามโครงสร างต นฉบ บ และ นาเอาร ปแบบพ นฐานของข อความมาใช ด วย เช น ล กษณะต วหนา ต วเอ ยง เป นต น - Text with structure plus full formatting (bold, italic, styles) วางข อความตามโครงสร างต นฉบ บ และนาเอาร ปแบบท กอย างมาใช ด วย เช น ล กษณะต วหนา ต วเอ ยง และสไตล ท ใช จ ดข อความ - Retain Line breaks ให คงล กษณะการแบ งบรรท ดไว ตามต นฉบ บ - Clean up Word paragraph spacing ล างค าระยะระหว างย อหน าท กาหนดไว ใน Word ออก

17 Note หากม ร ปภาพอย ในเน อหาท ก อปป มาโปรแกรมจากาหนดช อไฟล ให ก บร ปภาพเหล าน นอ ตโนม ต เช น clip_image001 (ต วเลขข างหล งจะเปล ยนไปตามลาด บร ป) และจะบ นท กไฟล ร ปภาพเก บไว ในเว บไซต ด วย Tip เราสามารถนาเน อหาจาก Microsoft Word และ Microsoft Excel เข ามาได ท งไฟล โดยเล อกคาส ง Fill > Import > Document หร อ Excel Document หร อ Excel Document ก อปป ตารางจาก Microsoft Excel การก อปป ตารางใน Excel ม ว ธ การคล ายก นก บการก อปป ข อความจาก Word ด งน

18

19 Note ในข นตอนท 5 ถ าเล อก Text only ไว โปรแกรมจะวางข อความในแต ละเชลเร ยงต อก น โดยไม ม ตาราง